<template>
  <div class="app-container">
    <div style="padding: 20px;">
      <el-row>
        <el-col :span="4">
          <strong style="font-size: 20px;">
            新增/修改
          </strong>
        </el-col>
      </el-row>

      <div style="padding:20px">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="店铺" prop="store">
            <el-select
              v-model="form.store"
              filterable
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in stores"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="终端号" prop="terminalId">
            <el-input v-model="form.terminalId" />
          </el-form-item>
          <el-form-item label="类型" prop="depositType">
            <el-select
              v-model="form.depositType"
              filterable
              clearable
              @change="$forceUpdate()"
            >
              <el-option
                v-for="item in types"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <div class="help-text" style="display: flex;">
              <div>
                <p class="el-icon-info" />
              </div>
              <div>
                <p v-html="typeText" />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="搜索方式" prop="option">
            <el-radio-group v-model="form.option" @input="form.searchCounter = null;form.searchUser = null;form.searchStore = null;">
              <el-radio v-for="(item,index) in options" :key="index" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <div v-if="form.option === 0">
              <el-row>
                <el-col :span="10">
                  <el-input v-model="form.searchUser" />
                </el-col>
                <el-col :span="12">
                  <el-button @click="findUser">搜索</el-button>
                </el-col>
              </el-row>
            </div>
            <div v-if="form.option === 1">
              <el-select
                v-model="form.searchCounter"
                filterable
                clearable
                @change="changeCounter($event)"
              >
                <el-option
                  v-for="item in counters"
                  :key="item.id"
                  :label="item.name + '(' + item.store.__toString + ')'"
                  :value="item.id"
                />
              </el-select>
            </div>
            <div v-if="form.option === 2">
              <el-select
                v-model="form.searchStore"
                filterable
                clearable
                @change="changeStore($event)"
              >
                <el-option
                  v-for="item in stores"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="用户">
            <el-input v-model="form.targetUsername" :disabled="true" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: Number(this.$route.params.id),
      form: {
        store: null,
        depositType: null,
        terminalId: null,
        option: 0,
        targetUser: null,
        targetUsername: null,
        searchCounter: null,
        searchUser: null,
        searchStore: null
      },
      options: [{ value: 0, label: '用户名' }, { value: 1, label: '台号' }, { value: 2, label: '店铺' }],
      typeText: '不填/选"huifu-pos"时费率为1.5%。选"0.7%"时费率为0.7%。选"1.5%"时费率为1.5%。选"interior"时费率为无费率',
      disabled: false,
      stores: [],
      counters: [],
      types: [
        { label: '1.5%费率', value: '1.5%' },
        { label: '0.7%费率', value: '0.7%' },
        { label: '0.6%费率', value: '0.6%' },
        { label: '0.22%费率', value: '0.22%' },
        { label: '0%费率', value: 'interior' }
      ]
    }
  },
  created() {
    this.getStores()
    this.getCounters()
    if (this.id) {
      this.axios.get(`/manage/huifu-pos-devices/${this.id}`).then((res) => {
        this.form.store = res.data.store?.id
        this.form.depositType = res.data.depositType
        this.form.terminalId = res.data.terminalId
        this.form.targetUser = res.data.targetUser?.id
        this.form.targetUsername = res.data.targetUser?.__toString
      })
    }
  },
  methods: {
    getStores() {
      this.axios.get(`/manage/stores`, {
        params: {
          limit: 10000000
        }
      }).then((res) => {
        this.stores = res.data
      })
    },
    getCounters() {
      this.axios.get(`/manage/counters`, {
        params: {
          limit: 10000000
        }
      }).then((res) => {
        this.counters = res.data
      })
    },
    findUser() {
      if (this.form.searchUser === '') {
        this.$message.error('请输入目标账号')
        return
      } else {
        this.axios.get(`/manage/users`, { params: { '@filter': `entity.getUsername() == ${this.form.searchUser}` }}).then((res) => {
          if (res.data.length === 0) {
            this.$message.error('目标用户不存在！')
          } else {
            this.form.targetUser = res.data[0].id
            this.form.targetUsername = res.data[0].username
          }
        })
      }
    },
    cleanBlankAttributes(data) {
      for (var propName in data) {
        if (data[propName] === null || data[propName] === undefined) {
          delete data[propName]
        }
      }
    },
    changeCounter(e) {
      const counter = this.counters.find(v => v.id === e)
      if (counter) {
        this.form.targetUser = counter.connectedDispatcher.id
        this.form.targetUsername = counter.connectedDispatcher.__toString
      }
      // this.$forceUpdate()
    },
    changeStore(e) {
      const store = this.stores.find(v => v.id === e)
      if (store) {
        this.form.targetUser = store.user.id
        this.form.targetUsername = store.user.__toString
      }
      // this.$forceUpdate()
    },
    onSubmit() {
      if (!this.form.store) {
        this.$message.error('请选择店铺！')
        return
      }
      if (!this.form.terminalId) {
        this.$message.error('请填写终端号！')
        return
      }

      if (this.id) {
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios.put(`/manage/huifu-pos-devices/${this.id}`, this.form).then((res) => {
          this.$message.success('修改成功！')
          this.$router.go(-1)
          loading.close()
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '数据交互中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        this.axios.post(`/manage/huifu-pos-devices`, this.form).then(staff => {
          loading.close()
          this.$message.success('修改成功！')
          this.$router.go(-1)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.help-text {
  display: flex;
  p {
    color: gray;
    line-height: 1.3em;
  }
  div {
    padding: 0 3px;
  }
}
</style>
